<template>
  <div class="supply-list-content pb-50px">
    <div class="filters">
      <RadioFilter
        v-model="formData[isSupply ? 'supplyType' : 'demandType']"
        label="资源类型"
        :list="supplyTypeList"
        @change="handleTypeChange"
      />
      <template v-if="props.type === 'supply'">
        <RadioFilter
          v-show="formData.supplyType === 1"
          v-model="formData.framePowerWay"
          label="供电方式"
          :list="framePowerWayOptions"
        />
        <RadioFilter
          v-show="formData.supplyType === 2"
          v-model="formData.bwOperator"
          label="运营商"
          :list="bwOperatorOptions"
        />
        <RadioFilter
          v-show="formData.supplyType === 2"
          v-model="formData.bwRouteType"
          label="路由类型"
          :list="bwRouteTypeOptions"
        />
        <RadioFilter
          v-show="formData.supplyType === 4"
          v-model="formData.gpuResource"
          label="计算资源"
          :list="gpuResourceOptions"
        />
        <RadioFilter
          v-show="formData.supplyType === 4"
          v-model="formData.gpuType"
          label="卡类型"
          :list="gpuTypeOptions"
        />
      </template>
      <RadioFilter
        v-model="formData.cityName"
        label="区域"
        :list="cityNameOptions"
      />
      <!-- <DateFilter v-if="!isSupply" v-model="range" label="需求时间" /> -->
    </div>
    <div class="cards flex flex-wrap mt-32px mb-8px" v-loading="loading">
      <component
        :is="isSupply ? SupplyCard : DemandCard"
        v-for="card in list"
        :key="card.id"
        :data="card"
      />
      <Empty v-if="!list.length" />
    </div>
    <el-pagination
      class="justify-end"
      :total="total"
      layout="total, sizes, prev, pager, next"
      v-model:current-page="page.pageNum"
      v-model:page-size="page.pageSize"
      :page-sizes="[15, 30, 60, 120]"
    ></el-pagination>
  </div>
</template>

<script setup>
import { enum2List } from "@/utils";
import { SOURCE_TYPE_ENUM, DICT_MAP } from "@/const";
import { useDict, usePage, useLoading } from "@/hooks";
import SupplyCard from "./supplyCard.vue";
import DemandCard from "./demandCard.vue";

const supplyFilterKeys = [
  "framePowerWay",
  "bwOperator",
  "bwRouteType",
  "gpuResource",
  "gpuType",
];

const $api = inject("$api");

const props = defineProps({
  type: String,
});

const isSupply = computed(() => props.type === "supply");

const supplyTypeList = enum2List(SOURCE_TYPE_ENUM, true);
// 供电方式
const { list: framePowerWayOptions } = useDict(DICT_MAP.power_way);
// 运营商
const { list: bwOperatorOptions } = useDict(DICT_MAP.operator);
// 路由类型
const { list: bwRouteTypeOptions } = useDict(DICT_MAP.route_type);
// 计算资源字典
const { list: gpuResourceOptions } = useDict(DICT_MAP.gpu_resource_type);
// 卡类型字典
const { list: gpuTypeOptions } = useDict(DICT_MAP.supply_gpu_type);
// 城市字典
const { list: cityNameOptions } = useDict(DICT_MAP.city_names);

const formData = ref({});
// 需求时间，变化后去更新formData
const range = ref([]);

const handleTypeChange = () => {
  supplyFilterKeys.forEach((key) => {
    formData.value[key] = "";
  });
};
const list = ref([]);
const { page, total, resetPage } = usePage(15);
const { loading, setLoading } = useLoading();
const queryList = async () => {
  setLoading(true);
  try {
    const apiName = props.type === "demand" ? "getDemandList" : "getSupplyList";
    const { data: rows, total: resTotal } = await $api.supply[apiName]({
      ...formData.value,
      ...page.value,
      status: 1,
    });
    total.value = resTotal;
    list.value = rows;
  } finally {
    setLoading(false);
  }
};

watch(
  () => formData.value,
  () => {
    resetPage();
  },
  {
    deep: true,
  }
);
watch(
  () => page.value,
  () => {
    queryList(true);
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
